<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AKan</title>
</head>
<!-- 独立JS -->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/sockjs-client/1.4.0/sockjs.js" charset="utf-8"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js" charset="utf-8"></script>
<body>
<style>
    .chatWindow{

        width: 100%;
        height: 500px;
        border: 1px solid blue;
    }
    .chatRecord{
        width: 100%;
        height: 400px;
        border-bottom: 1px solid blue;
        line-height:20px;
        overflow:auto;
        overflow-x:hidden;
    }
    .sendWindow{
        width: 100%;
        height: 200px;
    }
    .sendChatValue{

        width: 90%;
        height: 40px;

    }
</style>
<div style="float:left;width:40%">
    <p>请选择你是谁：</p>
    <select id="selectName" οnchange="sendAloneUser();">
        <option value="1">请选择</option>
        <option value="ALong">ALong</option>
        <option value="AKan">AKan</option>
        <option value="AYuan">AYuan</option>
        <option value="ALai">ALai</option>
        <option value="ASheng">ASheng</option>
    </select>
    <div class="chatWindow">
        <p style="color:darkgrey">群聊：</p>
        <section id="chatRecord" class="chatRecord">
            <p id="titleval" style="color:#CD2626;"></p>
        </section>
        <section class="sendWindow">
            <textarea name="sendChatValue" id="sendChatValue" class="sendChatValue"></textarea>
            <input type="button" name="sendMessage" id="sendMessage" class="sendMessage"
                   value="发送">
        </section>
    </div>
</div>


<div style="float:right; width:40%">
    <p>请选择你要发给谁：</p>
    <select id="selectName2">
        <option value="1">请选择</option>
        <option value="ALong">ALong</option>
        <option value="AKan">AKan</option>
        <option value="AYuan">AYuan</option>
        <option value="ALai">ALai</option>
        <option value="ASheng">ASheng</option>
    </select>
    <div class="chatWindow">
        <p style="color:darkgrey">单独聊：</p>
        <section id="chatRecord2" class="chatRecord">
            <p id="titleval" style="color:#CD2626;"></p>
        </section>
        <section class="sendWindow">
            <textarea name="sendChatValue2" id="sendChatValue2" class="sendChatValue"></textarea>
            <input type="button" name="sendMessage2" id="sendMessage2" class="sendMessage"
                   value="发送">
        </section>
    </div>
</div>
</div>
</body>
</html>
<script>
    var stompClient = null;
    //加载完浏览器后  调用connect（），打开双通道
    $(function () {
        //打开双通道
        connect()
    })

    //强制关闭浏览器  调用websocket.close（）,进行正常关闭
    window.onunload = function () {
        disconnect()
    }

    //打开双通道
    function connect() {
        var socket = new SockJS('http://127.0.0.1:8089/ws'); //连接SockJS的endpoint名称为"endpointAric"
        stompClient = Stomp.over(socket);//使用STMOP子协议的WebSocket客户端
        stompClient.connect({}, function (frame) {//连接WebSocket服务端
            console.log('Connected:' + frame);
            //广播接收信息
            stompTopic();
        });
    }

    //关闭双通道
    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        console.log("Disconnected");
    }

    //广播（一对多）
    function stompTopic() {
        //通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息（广播接收信息）
        stompClient.subscribe('/mass/getResponse', function (response) {
            var message = JSON.parse(response.body);
            //展示广播的接收的内容接收
            var response = $("#chatRecord");
            response.append("<p><span>" + message.name + ":</span><span>" + message.content + "</span></p>");
        });
    }

    //列队（一对一）
    function stompQueue() {
        //var userId = $("#selectName").val();
		var userId  = "AKan"
        alert("监听:" + userId)
        //通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息（队列接收信息）
        stompClient.subscribe('/user/' + userId + '/alone/getResponse', function (response) {
            var message = JSON.parse(response.body);
            //展示一对一的接收的内容接收
            var response = $("#chatRecord2");
            response.append("<p><span>" + message.name + ":</span><span>" + message.content + "</span></p>");
        });
    }

    //选择发送给谁的时候触发连接服务器
    function sendAloneUser() {
        stompQueue();
    }
	
	$("#sendMessage").click(function(){
		sendMassMessage();
	})
	
	$("#sendMessage2").click(function(){
		sendAloneMessage();
	})
	
    //群发
    function sendMassMessage() {
        var postValue = {};
        var chatValue = $("#sendChatValue");
        var userName = $("#selectName").val();
        postValue.name = userName;
        postValue.content = chatValue.val();
        if (userName == 1 || userName == null) {
            alert("请选择你是谁！");
            return;
        }
        if (chatValue == "" || userName == null) {
            alert("不能发送空消息！");
            return;
        }

        stompClient.send("/massRequest", {}, JSON.stringify(postValue));
        chatValue.val("");
    }

    //单独发
    function sendAloneMessage() {
        var postValue = {};
        var chatValue = $("#sendChatValue2");
        var userName = $("#selectName").val();
        var sendToId = $("#selectName2").val();
        var response = $("#chatRecord2");
        postValue.name = userName;
        postValue.content = chatValue.val();
        postValue.userId = sendToId;
        if (userName == 1 || userName == null) {
            alert("请选择你是谁！");
            return;
        }
        if (sendToId == 1 || sendToId == null) {
            alert("请选择你要发给谁！");
            return;
        }
        if (chatValue == "" || userName == null) {
            alert("不能发送空消息！");
            return;
        }
        stompClient.send("/aloneRequest", {}, JSON.stringify(postValue));
        response.append("<p><span>" + userName + ":</span><span>" + chatValue.val() + "</span></p>");
        chatValue.val("");
    }
</script>